<template>
  <!-- 弹框组件 -->
    <el-dialog :title="title" :visible.sync="visible" :before-close="close">
      <el-form :model="form">
        <el-form-item label="数据字典标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据字典编码" :label-width="formLabelWidth">
          <el-input v-model="form.sn" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据字典简介" :label-width="formLabelWidth">
          <el-input v-model="form.intro" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import {
  addSysdictionary,
  editSysdictionary
} from "@/request/httpApi";
export default {
    props: ["title", "visible", "form"],
    data() {
        return {
            formLabelWidth: "100px"
        }
    },
    methods: {
        close(reload) {
            //关闭弹框
            //触发自定义事件
            this.$emit('close', reload)
        },
        //确认按钮会触发
    submit() {
      const params = {
        sn: this.form.sn,
        title: this.form.title,
        intro: this.form.intro
      };
      if (this.form.id) {
        params.id = this.form.id;
        //编辑
        editSysdictionary(params).then(res => {
          if (res.success) {
            //关闭弹窗
            this.close('reload');
            //提示成功
            this.$message({
              message: "编辑数据字典！",
              type: "success"
            });
          } else {
            //提示后端返回的msg
            this.$message({
              message: res.msg || "登录失败",
              type: "error"
            });
          }
        });
      } else {
        //添加
        addSysdictionary(params).then(res => {
          if (res.success) {
            //关闭弹框
            this.close('reload');
            //提示成功
            this.$message({
              message: "添加数据字典！",
              type: "success"
            });
          } else {
            // 提示后端返回的msg
            this.$message({
              message: res.msg || "添加失败",
              type: "error"
            });
          }
        });
      }
    },
    }
}
</script>

<style>

</style>